<template>
    <div class="p-2">
        <searchrevealing>
            <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="88px">
                <el-form-item label="选品部门" prop="coreId">
                    <el-select v-model="queryParams.coreId" placeholder="请选择" clearable style="width: 220px" filterable>
                        <el-option v-for="dict in coreList" :key="dict.userId" :label="dict.userName"
                            :value="dict.userId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="招商员" prop="recruiterName">
                    <el-input style="width: 220px" v-model="queryParams.recruiterName" placeholder="请输入" maxlength="20"
                        @keyup.enter="handleQuery" clearable></el-input>
                </el-form-item>
                <el-form-item label="供应商" prop="supplierId">
                    <el-select filterable v-model="queryParams.supplierId" placeholder="请选择" clearable
                        v-selectLoad="selectLoad" :teleported="false" :fit-input-width="true" remote
                        :remote-method="searchQuery" class="supplierSelect" style="width: 220px"
                        :loading="supplierQueryLoading" @clear="handleClear">
                        <el-option v-for="dict in supplierNameOptions" :key="dict.value" :label="dict.label"
                            :value="dict.value">
                        </el-option>
                        <template v-if="supplierLoading">
                            <div class="supplierSelect_icon">
                                <el-icon class="el-select-loading__icon">
                                    <Loading />
                                </el-icon>
                                <span class="el-select-loading__tips">{{ "正在加载" }}</span>
                            </div>
                        </template>
                        <template #loading>
                            <svg class="circular" viewBox="0 0 50 50">
                                <circle class="path" cx="25" cy="25" r="20" fill="none" />
                            </svg>
                        </template>
                    </el-select>
                </el-form-item>

                <el-form-item label="是否已拉群" prop="chatStatus">
                    <el-select v-model="queryParams.chatStatus" placeholder="请选择" clearable style="width: 220px"
                        filterable>
                        <el-option v-for="dict in pullGroupList" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="拉群人" prop="chatCreateUserName">
                    <el-input style="width: 220px" v-model="queryParams.chatCreateUserName" placeholder="请输入"
                        maxlength="20" @keyup.enter="handleQuery" clearable></el-input>
                </el-form-item>
            </el-form>
            <div class="form_button">
                <el-button type="primary" @click="handleQuery" :loading="queryLoading">查询</el-button>
                <el-button @click="resetQuery" :loading="queryLoading">重置</el-button>
            </div>
        </searchrevealing>
        <el-card shadow="never">
            <template #header>
                <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :name="'产品部拉群邀请'"
                    @updateColumn="getColmun"></right-toolbar>
            </template>
            <el-table v-loading="loading" :data="selectionRecordList" border @header-dragend="dragEnd">
                <el-table-column label="序号" type="index" width="55" align="center" :fixed="true" />
                <el-table-column v-for="(item, index) in groupInvitationColumns" :key="index" :label="item.label"
                    align="center" :prop="item.prop" show-overflow-tooltip :fixed="item.fixed" :width="item.width">
                    <template #default="scope">
                        <div v-if="item.prop == 'chatStatus'">
                            <div v-if="!scope.row.editPullGroup">{{ scope.row.chatStatus == '1' ? '是' : '否' }}</div>
                            <div v-else>
                                <el-select v-model="scope.row.pullGroups" clearable>
                                    <el-option v-for="dict in pullGroupList" :key="dict.value" :label="dict.label"
                                        :value="dict.value" />
                                </el-select>
                            </div>
                        </div>
                        <div v-if="item.prop == 'chatName'">
                            <div v-if="!scope.row.editGroupName">{{ scope.row.chatName }}</div>
                            <div v-else>
                                <el-input maxlength="50" v-model="scope.row.groupNames"></el-input>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-button link type="primary" @click="handleInfo(scope.row)"
                            v-if="!scope.row.editGroupName && !scope.row.editPullGroup">编辑</el-button>
                        <el-button link type="primary" @click="handleSave(scope.row)" class="color_theme"
                            v-else>完成</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="paginationChange" />
        </el-card>


    </div>
</template>



<script setup name="GroupInvitation" lang="ts">
const { proxy } = getCurrentInstance() as any;
import { GroupInvitationQueryParmas, GroupInvitationVO } from '@/api/group/productOutbound/types'
import { getCoreIdList, getChatList, upadteChat } from '@/api/group/productOutbound/index'
import { loginSupplierList } from '@/api/group/supplier/index'
import { listColumn } from '@/api/system/column';
const groupInvitationColumns = ref()
const columnData = ref()
const selectionRecordList = ref<GroupInvitationVO[]>([]);
const loading = ref(true);
const total = ref(0);
const showSearch = ref(true);
const queryFormRef = ref<ElFormInstance>();
const queryLoading = ref(false)
const supplierNameOptions = ref<any[]>([])
const supplierNameDate = ref({
    pageNum: 1,
    pageSize: 10,
    supplierName: ''
})
const supplierQueryLoading = ref(false)
const supplierLoading = ref(true)
const supplierNametotal = ref()

// 选品部门
const coreList = ref<{ userId: string, userName: string }[]>([])
// 是否已拉群
const pullGroupList = ref([
    { label: '是', value: '1' },
    { label: '否', value: '0' },
])


const queryParams = ref<GroupInvitationQueryParmas>({
    pageNum: 1,
    pageSize: 10,
    coreId: undefined,
    recruiterName: undefined,
    supplierId: undefined,
    chatStatus: undefined,
    chatCreateUserName: undefined,
})

/**
 * 获取选品部门
 */
const getAnorch = async () => {
    const res = await getCoreIdList()
    coreList.value = res.data
}

/** select懒加载 */
const selectLoad = async () => {
    if (supplierNameOptions.value.length < supplierNametotal.value) {
        supplierNameDate.value.pageNum++;
        getHmSupplierList()
    }
}

// 获取供应商列表
const getHmSupplierList = async () => {
    supplierLoading.value = true
    const res = await loginSupplierList(supplierNameDate.value)
    const reshandle = res.rows.map((item: any) => (
        {
            label: item.supplierName,
            value: item.id
        }
    ))
    supplierNameOptions.value.push(...reshandle)
    supplierNametotal.value = res.total
    supplierLoading.value = false
}
/** 远程搜索 */
const searchQuery = async (query: string) => {
    supplierQueryLoading.value = true
    supplierNameOptions.value = []
    supplierNameDate.value.pageNum = 1;
    supplierNameDate.value.pageSize = 10
    supplierNameDate.value.supplierName = query
    await getHmSupplierList()
    supplierQueryLoading.value = false
}
/** 清空供应商 */
const handleClear = () => {
    supplierNameDate.value.supplierName = ''
    supplierNameOptions.value = []
    supplierNameDate.value.pageNum = 1;
    supplierNameDate.value.pageSize = 10
    getHmSupplierList()
}

/** 编辑 */
const handleInfo = (row: GroupInvitationVO) => {
    selectionRecordList.value.forEach(item => {
        item.editGroupName = false
        item.editPullGroup = false
        row.groupNames = row.chatName
        row.pullGroups = row.chatStatus
    })
    row.editGroupName = !row.editGroupName
    row.editPullGroup = !row.editPullGroup

};
/** 完成 */
const handleSave = async (row: GroupInvitationVO) => {
    row.editGroupName = false
    row.editPullGroup = false

    row.chatName = row.groupNames
    row.chatStatus = row.pullGroups
    await upadteChat({
        chatId: row.chatId,
        chatStatus: row.chatStatus,
        chatName: row.chatName
    })

    getList()
}
/** 查询列表 */
const getList = async () => {
    try {
        loading.value = true;
        const res = await getChatList(queryParams.value);
        (selectionRecordList.value as any) = res.rows;
        total.value = res.total;
        loading.value = false;
        queryLoading.value = false
    } catch (e) {
    } finally {
        loading.value = false;
    }
};
/** 搜索按钮操作 */
const handleQuery = () => {
    queryLoading.value = true
    queryParams.value.pageNum = 1;
    getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleClear();
    handleQuery();
};
/** 获取colmun */
const getColmun = async () => {
    const columnDatas = await proxy?.useColumn('产品部拉群邀请')
    groupInvitationColumns.value = columnDatas.columnCustom
    columnData.value = columnDatas
    queryParams.value.pageSize = columnDatas.columnPageSize || 10
}
/** 拖拽事件 */
const dragEnd = async (newWidth: number, oldWidth: number, column: any, event: MouseEvent) => {
    columnData.value.columnCustom.map((item: any) => {
        if (item.prop == column.property) {
            item.width = newWidth
        }
    })
    await proxy?.useColumnUpdate(columnData.value, queryParams.value.pageSize)
}
/** 页数变化 */
const paginationChange = async () => {
    await getList();
    await proxy?.useColumnUpdate(columnData.value, queryParams.value.pageSize)
    getColmun()
}
onMounted(async () => {
    queryParams.value.pageNum = 1;
    await getColmun();
    await getList();
    getAnorch();
})

</script>
<style lang="scss" scoped>
.mb96 {
    margin-bottom: 96px;
}

:deep(.el-card__header) {
    display: flex;
    justify-content: flex-end;
}

.form_button {
    display: flex;
    justify-content: flex-end;
}

.color_theme {
    color: #19D11B;
}

.circular {
    display: inline;
    height: 30px;
    width: 30px;
    animation: loading-rotate 2s linear infinite;
}

.path {
    animation: loading-dash 1.5s ease-in-out infinite;
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    stroke-width: 2;
    stroke: var(--el-color-primary);
    stroke-linecap: round;
}

.supplierSelect {
    :deep(.el-popper) {
        left: 0 !important;
        top: 34px !important;
        z-index: 7000 !important;
        width: 100% !important;
    }
}

:deep(.el-tabs__content) {
    overflow: visible !important;
}

.supplierSelect_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.el-select-loading__tips {
    color: #606266;
    font-size: 14px;
}
</style>